<template>
  <base-content>
    <div class="container q-pa-lg q-col-gutter-md">
      <q-table
        class="mxpio-shadow"
        :grid="$q.screen.xs"
        title="用户列表"
        :data="data"
        :columns="columns"
        row-key="username"
        separator="cell"
        :pagination.sync="pagination"
      >
        <template v-slot:top>
          <q-btn-group push>
            <q-btn :label="$t('new')" icon="add" @click="newForm = true">
              <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
                {{ $t('newtip') }}
              </q-tooltip>
            </q-btn>
            <q-btn :label="$t('refresh')" icon="refresh" @click="reFresh()">
              <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
                {{ $t('refreshtip') }}
              </q-tooltip>
            </q-btn>
            <q-btn :label="$t('download')" icon="cloud_download" @click="downloadData()">
              <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
              {{ $t('downloadtip') }}
              </q-tooltip>
            </q-btn>
          </q-btn-group>
          <q-space />
          <q-input outlined rounded dense debounce="300" color="primary" v-model="filter" :placeholder="$t('search')" @keyup.enter="list()">
            <template v-slot:append>
              <q-icon name="search" @click="list()"/>
            </template>
          </q-input>
          <q-dialog v-model="newForm">
            <q-card class="shadow-24">
              <q-bar>
                <div>{{ $t('newtip') }}</div>
                <q-space />
                <q-btn dense flat icon="close" v-close-popup>
                  <q-tooltip>{{ $t('close') }}</q-tooltip>
                </q-btn>
              </q-bar>
              <q-card-section>
                <q-form
                  class="q-gutter-md"
                  ref="myForm"
                >
                  <q-input
                    v-for="(column) in columns"
                    :key="column.name"
                    dense
                    outlined
                    square
                    v-model="column.name"
                    :label="column.label"
                    autofocus
                    @keyup.enter="newDataSubmit()"/>
                </q-form>
              </q-card-section>
              <div style="float: right; padding: 15px 15px 15px 0">
                <q-btn color="white" text-color="black" style="margin-right: 25px" @click="newDataCancel()">{{ $t('cancel') }}</q-btn>
                <q-btn color="primary" @click="newDataSubmit()">{{$t('submit')}}</q-btn>
              </div>
            </q-card>
          </q-dialog>
        </template>
      </q-table>
    </div>
  </base-content>
</template>
<script>
import BaseContent from 'components/BaseContent/BaseContent'
import { getUserList } from 'src/api/UserApi'

export default {
  name: 'userlist',
  components: {
    BaseContent
  },
  data () {
    return {
      filter: '',
      pagination: {
        page: 1,
        rowsPerPage: '20'
      },
      columns: [
        {
          name: 'username',
          required: true,
          label: '用户名',
          align: 'left',
          field: row => row.username,
          format: val => `${val}`,
          sortable: true
        }, {
          name: 'nickname',
          required: true,
          label: '姓名',
          align: 'left',
          field: row => row.nickname,
          format: val => `${val}`,
          sortable: true
        }, {
          name: 'administrator',
          label: '管理员',
          align: 'left',
          field: row => row.administrator,
          format: val => `${val === true ? '是' : '否'}`,
          sortable: true
        }
      ],
      data: [],
      newForm: false,
      newFormData: {
        username: '',
        nickname: '',
        administrator: ''
      }
    }
  },
  created () {
    this.filter = ''
    this.list()
  },
  methods: {
    list () {
      const filter = this.filter
      getUserList(filter).then(res => {
        this.data = res.data.result
      })
    },
    reFresh () {
      var _this = this
      this.filter = ''
      _this.list()
    },
    newDataSubmit () {
      console.log(this.newFormData)
      console.log(this.columns)
    }
  }
}
</script>
